<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
    <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
	  <style scope>
    html,
    body,
    #app {
      height: 100%;
      margin: 0px;
      padding: 0px;
    }
    html, body {
    	padding: 0;
    	margin: 0;
    	height: 100%;
    	font-size: 16px;
    	background: #fff;
    	color: #202d40;
    	font-family: 'Source Sans Pro';

    }

    h1 {
    	font-size: 2.8em;
    	font-weight: 700;
    	letter-spacing: -1px;
    	margin: 0.6rem 0;
    }
    h1 > span {font-weight: 300; }
    h2 {
    	font-size: 1.15em;
    	font-weight: 300;
    	margin: 0.3rem 0;
    }
    main {
    	width: 95%;
    	max-width: 1000px;
    	margin: 4em auto;
    	opacity: 0;
    }
    main.loaded {transition: opacity .25s linear;opacity: 1; }
    main header {width: 100%; }
    main header > div {width: 50%; }
    main header > .left, main header > .right {height: 100%; }
    main .loaders {
    	width: 100%;
    	box-sizing: border-box;
    	display: flex;
    	flex: 0 1 auto;
    	flex-direction: row;
    	flex-wrap: wrap;
    }
    main .loaders .loader {
    	box-sizing: border-box;
    	display: flex;
    	flex: 0 1 auto;
    	flex-direction: column;
    	flex-grow: 1;
    	flex-shrink: 0;
    	flex-basis: 25%;
    	max-width: 25%;
    	height: 200px;
    	align-items: center;
    	justify-content: center;
    }
    @-webkit-keyframes square-spin {
      25% {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
                transform: perspective(100px) rotateX(180deg) rotateY(0); }

      50% {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
                transform: perspective(100px) rotateX(180deg) rotateY(180deg); }

      75% {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
                transform: perspective(100px) rotateX(0) rotateY(180deg); }

      100% {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
                transform: perspective(100px) rotateX(0) rotateY(0); } }

    @keyframes square-spin {
      25% {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
                transform: perspective(100px) rotateX(180deg) rotateY(0); }

      50% {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
                transform: perspective(100px) rotateX(180deg) rotateY(180deg); }

      75% {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
                transform: perspective(100px) rotateX(0) rotateY(180deg); }

      100% {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
                transform: perspective(100px) rotateX(0) rotateY(0); } }

    .square-spin > div {
      -webkit-animation-fill-mode: both;
              animation-fill-mode: both;
      width: 50px;
      height: 50px;
      margin: 0 auto;
      background: #3370FF;
      -webkit-animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
              animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite; }

#loader-wrapper{
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -120px;
  margin-top: -100px;
  text-align: center;
}
  </style>
  </head>
  <body>
    <div id="app">
	    <div id="loader-wrapper">
		   <!-- <div id="loader"></div>
		    <div class="loader-section section-left"></div>
		    <div class="loader-section section-right"></div>
		    <div class="load_title">正在加载系统资源，请耐心等待</div> -->
        <div class="loader-inner square-spin">

          <div></div>

        </div>

        <div class="load_title" style="margin-top: 24px;">正在加载系统资源，请耐心等待</div>
        </div>

	</div>
  </body>
</html>
